<template>
	<view class="business">
		<view class="business_header" :style="{ paddingTop: StatusBar + 'px' }">
			<view class="header_box">
				<view class="header_back" @click="navigateBack()">
					<text class="iconfont icon-Left"></text>
				</view>
				<view class="header_title">选择商家</view>
			</view>
		</view>
		<view class="business_game">
			<view class="game_image">
				<image :src="details_data.img" mode=""></image>
			</view>
			<view class="game_message">
				<view class="message_tips">已选择：{{details_data.name}}</view>
				<view class="message_btn"  @click="navigateBack()">更换游戏</view>
			</view>
		</view>
		<view class="business_list">
			<view class="list_item" @click="tapImg(item.img, item.name)" v-for="(item, index) in list_data" :key="item.id">
				<view class="item_image">
					<image :src="item.img" mode=""></image>
				</view>
				<view class="item_bottom">
					<view class="bottom_name">{{item.name}}</view>
					<view class="bottom_btn">选择商家</view>
				</view>
			</view>
			<u-empty
					v-if="!list_data.length"
					text="当前游戏暂无回收商家~"
			        mode="car"
			        icon="http://cdn.uviewui.com/uview/empty/car.png"
			>
			</u-empty>
		</view>

		<u-overlay :show="show" @click="show = false">
			<view class="business_show">
				<view class="show_content"  @tap.stop>
					<view class="content_title">{{details_data.name}}-{{name}}</view>
					<view class="content_image">
						<image :src="img" mode=""></image>
					</view>
					<view class="content_tips">打开微信APP扫描二维码添加</view>
					<view class="content_btn">保存到相册</view>
					<view class="show_colse">
						<text class="iconfont icon-guanbi"  @click="show = false"></text>
					</view>
				</view>
				
			</view>
		</u-overlay>
	</view>
</template>

<script>
import {game_details, business_list} from '@/api/game'
export default {
	data() {
		return {
			show: false,
			details_data: {},
			list_data: {},
			img: "",
			name: ""
		};
	},
	onLoad(option) {
		this.game_details(option.id)
	},
	methods: {
		tapImg(img, name) {
			this.img=img
			this.name=name
			this.show = true
		},
		async game_details(id) {
			let data = await game_details({id})
			if (data) {
				this.details_data = data.data
				this.business_list(id)
			}
		},
		async business_list(id) {
			let data = await business_list({id})
			if (data) {
				this.list_data = data.data
			}
		}
		
	}
};
</script>

<style>
page {
	background: #f7f8fa;
}
</style>
<style lang="scss" scoped>
.business {
	display: flex;
	flex-direction: column;
	height: 100vh;
	.business_header {
		background: #fff;
		.header_box {
			display: flex;
			align-items: center;
			padding: 28rpx 32rpx;
			position: relative;
			font-weight: bold;
			.header_back {
				margin-left: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.header_title {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}
	}
	.business_game {
		margin: 24rpx 32rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 16rpx;
		display: flex;
		align-items: center;
		.game_image {
			width: 136rpx;
			height: 136rpx;
			border-radius: 20rpx;
			overflow: hidden;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.game_message {
			margin-left: auto;
			.message_tips {
				font-size: 24rpx;
				color: #979797;
			}
			.message_btn {
				margin-top: 10rpx;
				width: 176rpx;
				height: 68rpx;
				background: #FDD637;
				border-radius: 24rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				color: #000000;
			}
		}
	}
	.business_list {
		margin-top: 16rpx;
		flex: 1;
		overflow-y: scroll;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		box-sizing: border-box;
		padding: 24rpx 20rpx 0;
		display: inline-block;.list_item {
			float: left;
			padding: 16rpx 20rpx;
			background: #FFE78F;
			border-radius: 28rpx 28rpx 28rpx 28rpx;
			margin: 0 11rpx;
			margin-bottom: 16rpx;
			box-sizing: border-box;
			.item_image {
				width: 292rpx;
				height: 292rpx;
				background: #FFE78F;
				border-radius: 28rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.item_bottom {
				display: flex;
				align-items: center;
				margin-top: 12rpx;
				.bottom_name {
					font-size: 20rpx;
					color: #170A06;
					font-weight: bold;
				}
				.bottom_btn {
					margin-left: auto;
					width: 156rpx;
					height: 40rpx;
					background: rgba(255,255,255,0.5);
					border-radius: 60rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24rpx;
					color: #FF8801;
				}
			}
		}
		
	}
	
	.business_show {
		width: 750rpx;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		.show_content {
			
			width: 640rpx;
			background: url(@/static/business/sjewm.png) no-repeat;
			background-size: 100%;
			.content_title {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 36rpx;
				line-height: 36rpx;
				margin-top: 28rpx;
				color: #22150B;
				font-weight: bold;
			}
			.content_image {
				width: 312rpx;
				height: 312rpx;
				border-radius: 20rpx;
				margin: 16rpx auto 0;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.content_tips {
				font-size: 32rpx;
				color: #B5B5B5;
				text-align: center;
				margin-top: 72rpx;
			}
			.content_btn {
				width: 372rpx;
				height: 88rpx;
				background: #FDD637;
				border-radius: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32rpx;
				color: #22150B;
				margin: 32rpx auto 0 ;

			}
			.show_colse {
				margin-top: 84rpx;
				text-align: center;
				.iconfont {
					font-size: 60rpx;
					font-weight: bold;
					color: #ffff;
				}
			}
		}

	}
}


</style>
